<%= render_component_tag :li,
  id: id,
  key: "#{id}-entity-#{type}",
  class: "list-none",
  "x-init": "$nextTick(() => checkActive())",
  "x-show": "!filteredOut",
  "@navigation:complete.window": "checkActive",
  # "x-effect": "active = ($refs.link && (window.location.pathname === $refs.link.getAttribute('href')))",
  data: { "entity-type": type.to_s.tr("_","-") },
  cloak: true do %>
  <%= lookbook_tag href.present? ? :a : :button,
    href: href,
    key: "#{id}-action",
    class: "nav-action",
    style: "padding-left: #{left_pad}px",
    "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
    <div class="nav-action-inner">
      <% if children? %>
        <%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
        <%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
      <% end %>
      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
      <span class="truncate <% if node.type == :preview %>font-semibold<% end %>"><%= label %></span>
    </div>
  <% end %>
  
  <% if children? %>
    <ul x-ref="items" x-show="open" x-cloak>
      <%= safe_join(children) %>
    </ul>
  <% end %>  
<% end %>
